<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id="app">
<!--        <el-button :plain="true" @click="open">打开消息提示</el-button>-->
<!--        <el-button :plain="true" @click="openVn">VNode</el-button>-->


        <div class="register-wrapper">
            <div id="register">
                <p class="title">注册</p>
                <el-form
                        :model="ruleForm2"
                        status-icon
                        :rules="rules2"
                        ref="ruleForm2"
                        label-width="0"
                        class="demo-ruleForm"
                        fit="false"
                        style="width:500px">
                    <el-form-item prop="tel">
                        <el-input
                                v-model="ruleForm2.tel"
                                auto-complete="off"
                                placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="smscode" class="code">
                        <el-input
                                v-model="ruleForm2.smscode"
                                placeholder="验证码"></el-input>
                        <el-button
                                type="primary"
                                :disabled="isDisabled"
                                @click="sendCode">{{ buttonText }}</el-button>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input
                                type="password"
                                v-model="ruleForm2.pass"
                                auto-complete="off"
                                placeholder="输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkPass">
                        <el-input
                                type="password"
                                v-model="ruleForm2.checkPass"
                                auto-complete="off"
                                placeholder="确认密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                @click="submitForm('ruleForm2')"
                                style="width:100%;">注册</el-button>
                        <p class="login" @click="gotoLogin">已有账号？立即登录</p>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>



    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        new Vue({
            el: '#register',
            name: "Register",
            data() {
                // <!--验证手机号是否合法-->
                let checkTel = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入手机号码"));
                    } else if (!this.checkMobile(value)) {
                        callback(new Error("手机号码不合法"));
                    } else {
                        callback();
                    }
                };
                //  <!--验证码是否为空-->
                let checkSmscode = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入手机验证码"));
                    } else {
                        callback();
                    }
                };
                // <!--验证密码-->
                let validatePass = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请输入密码"));
                    } else {
                        if (this.ruleForm2.checkPass !== "") {
                            this.$refs.ruleForm2.validateField("checkPass");
                        }
                        callback();
                    }
                };
                // <!--二次验证密码-->
                let validatePass2 = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error("请再次输入密码"));
                    } else if (value !== this.ruleForm2.pass) {
                        callback(new Error("两次输入密码不一致!"));
                    } else {
                        callback();
                    }
                };
                return {
                    ruleForm2: {
                        pass: "",
                        checkPass: "",
                        tel: "",
                        smscode: "",
                    },
                    rules2: {
                        pass: [
                            { validator: validatePass, trigger: "change" },
                            { min: 6, max: 10, message: "密码须为3-10个字符", trigger: "blur" },
                        ],
                        checkPass: [
                            { validator: validatePass2, trigger: "change" },
                            { min: 6, max: 10, message: "密码须为3-10个字符", trigger: "blur" },
                        ],
                        tel: [{ validator: checkTel, trigger: "change" }],
                        smscode: [{ validator: checkSmscode, trigger: "change" }],
                    },
                    buttonText: "发送验证码",
                    isDisabled: false, // 是否禁止点击发送验证码按钮
                    flag: true,
                };
            },
            methods: {
                // <!--发送验证码-->
                sendCode() {
                    this.$axios.post('http://url.com/',{
                        tel:this.ruleForm2.tel
                        // headers:{"Content-Type":"application/x-www-form-urlencoded"}
                    }).then(resp => {
                        if (this.checkMobile(tel)) {
                            let time = 60;
                            this.buttonText = "已发送";
                            this.isDisabled = true;
                            if (this.flag) {
                                this.flag = false;
                                let timer = setInterval(() => {
                                    time--;
                                    this.buttonText = time + " 秒";
                                    this.message("发送成功，注意查收")
                                    if (time === 0) {
                                        clearInterval(timer);
                                        this.buttonText = "重新获取";
                                        this.isDisabled = false;
                                        this.flag = true;
                                    }
                                }, 1000);
                            }
                        }
                    }).catch((failResponse) => {
                        console.log('failResponse');
                        return false
                    })},
                    // <!--提交注册-->
                    submitForm(formName){
                        this.$refs.ruleForm2.validate((valid) => {
                            if (valid) {
                                this.$axios({
                                    method: "POST",
                                    url: "/api/relueForm2",
                                    headers: {
                                        "Content-Type": "application/json;charset=UTF-8",
                                    },
                                    data: {
                                        tel: this.ruleForm2.tel,
                                        smscode: this.ruleForm2.smscode,
                                        pass: this.ruleForm2.pass,
                                        checkPass: this.ruleForm2.checkPass,
                                    },
                                })
                                    .then((res) => {
                                        if (res.data.message === "SUCCESS") {
                                            this.$router.push("/login");
                                            this.$notify({
                                                title: "提示",
                                                message: "注册成功",
                                                duration: 2000,
                                            });
                                        } else {
                                            this.$notify({
                                                title: "提示",
                                                message: "注册失败",
                                                duration: 2000,
                                            });
                                        }
                                    })
                                    .catch(() => {
                                        his.$notify({
                                            title: "提示",
                                            message: "用户访问错误",
                                            duration: 2000,
                                        });
                                    });
                            } else {
                                console.log("error submit!!");
                                return false;
                            }
                        });
                    },
                    // <!--进入登录页-->
                    gotoLogin() {
                        this.$router.push({
                            path: "/login",
                        });
                    },
                    // 验证手机号
                    checkMobile(str) {
                        let re = /^1\d{10}$/;
                        if (re.test(str)) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                },
            })
        // new Vue({
        //     el: '#app',
        //     methods: {
        //         open() {
        //             this.$message('这是一条消息提示');
        //         },
        //
        //         openVn() {
        //             const h = this.$createElement;
        //             this.$message({
        //                 message: h('p', null, [
        //                     h('span', null, '内容可以是 '),
        //                     h('i', { style: 'color: teal' }, 'VNode')
        //                 ])
        //             });
        //         }
        //     }
        // })
        // export default {
        //     methods: {
        //         open() {
        //             this.$message('这是一条消息提示');
        //         },
        //
        //         openVn() {
        //             const h = this.$createElement;
        //             this.$message({
        //                 message: h('p', null, [
        //                     h('span', null, '内容可以是 '),
        //                     h('i', { style: 'color: teal' }, 'VNode')
        //                 ])
        //             });
        //         }
        //     }
        // }
    </script>


</body>
</html>